<template>
	<div class="form-detail-list">
		<el-dialog title="表单详情" :visible.sync="visible" width="40%" :before-close="cancel" class="form-detail-dialog">
			<el-table :data="list" stripe style="width: 100%" border class="form-detail-table">
				<el-table-column type="index" label="序号" width="50" align="center"> </el-table-column>
				<el-table-column prop="formTemplate.name" label="表单名称" width="auto" align="center"> </el-table-column>
				<el-table-column prop="status" label="提交状态" width="auto" align="center"> </el-table-column>
				<!-- <el-table-column prop="date" label="提交时间" width="280" align="center"> </el-table-column> -->
				<el-table-column label="操作" width="180" align="center">
					<template slot-scope="scope">
						<el-button v-show="list[scope.$index].id" @click.native.prevent="view(scope.$index, list)" type="primary" size="small"> 查看 </el-button>
					</template>
				</el-table-column>
			</el-table>
			<span slot="footer" class="dialog-footer">
				<el-button @click="cancel">取 消</el-button>
				<el-button type="primary" @click="ok">确 定</el-button>
			</span>
		</el-dialog>
		<ViewFormDeatil v-if="showDetail" :showDetail="showDetail" :no="serviceNo" :formId="formId" :detailId="detailId" @close="closeDetail" />
	</div>
</template>

<script>
import ViewFormDeatil from '@/views/components/ViewFormDeatil.vue';
export default {
	components: {
		ViewFormDeatil
	},
	props: {
		visible: {
			type: Boolean,
			default: () => false
		},
		list: {
			type: Array,
			default: () => []
		},
		serviceNo: {
			type: String,
			default: () => ''
		}
	},
	data() {
		return {
			showDetail: false,

			formId: '',
			detailId: ''
		};
	},
	methods: {
		cancel() {
			this.$emit('cancel');
		},
		ok() {
			this.$emit('cancel');
		},
		closeDetail() {
			this.showDetail = false;
		},

		view(index, data) {
			const form = data[index];
			this.formId = form.data.id || '';
			this.detailId = form.id || '';
			this.showDetail = true;
			console.log(form);
		}
	}
};
</script>

<style lang="less" scoped>
.form-detail-list {
	.form-detail-dialog {
		.form-detail-table {
			.el-table {
				width: 100%;
				overflow: auto;
			}
			.el-table thead {
				tr {
					background-color: #eee;
				}
				.el-table-column--selection .cell {
					display: none !important;
				}
			}
			.el-table__fixed-right {
				height: 100% !important;
				bottom: 1px;
			}
			.el-table .cell {
				font-size: 12px !important;
			}
		}
	}
}
</style>
